<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      border: 1px solid #000;
    }
    .box2 {
      position: relative;
      top: 50px;
      left: 50px;
    }
  </style>
</head>
<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
</body>
</html>

<!-- 
  相对定位:

    position: relative;	
    相对定位是不会脱离文档流
    相对定位的参照物就是自己的初始位置
    坐标的值可以是负数

    可以理解为相对定位就是给元素自身添加平移的效果

    相对定位平移后依旧占据的是原来的空间



    包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
    默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
    定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

    如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。

    绝对和相对定位的区别
    1、参照物不同，绝对定位（absolute）的参照物是包含块（父级），相对定位的参照物是元素本身位置；
    2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
 -->